// 提供一个能够显示xtx-message组件的函数
// 这个函数将来： 导入直接使用，也可以挂载在vue实例原型上
// import Message from 'Message.js' Message({type: '', text: ''})

import { createVNode, render } from 'vue'
import type { VNode } from 'vue'
import myMessage from './myMessage/myMessage.vue'

// DOM容器
const div = document.createElement('div')
div.setAttribute('class', 'message-container')
document.body.appendChild(div)

// 定时器标识
let timer: any = null

const message = ({ type = 'error', text = 'hi' }: { type: string, text: string }, delay = 3000) => {
  // 渲染组件
  // 1. 导入消息提示组件
  // 2. 将组件编译为虚拟节点
  // createVNode(组件, 属性对象（props）)
  const vnode = createVNode(myMessage, { type, text })
  // 3. 准备一个装载消息提示组件的DOM容器
  // 4. 将虚拟节点渲染在容器中
  // render(虚拟节点，DOM容器)
  render(vnode, div)
  // 读取组件暴露出来的属性/方法
  // vnode.component?.exposed

  // 5. 定时销毁组件
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, delay)
}

export default message
